#content h1 { margin: 0 0 .75em 0; font-size: 200%; }
#content h2 {
  margin: 1.5em 0 .75em 0; border-bottom: 2pt dotted silver;
  font-size: 150%;
}
#content h3 { margin: 1.5em 0 .5em 0; font-size: 125%; }
#content li { margin: .5em 0; }
#content dt { font-weight: bold; }
#content dd { margin-top: 1em; margin-bottom: 1em; }
#content aside.info { margin: 1em 0 1em 2em; color: gray; }
#content pre {
  overflow: auto;
  padding: .5em 1em; border-left: 5px solid silver;
  background-color: #f0f0f0;
}
#content table { border-spacing: 0; }
#content a, #content a:visited { color: #3d586c; }

#content .center { text-align: center; }

/* Home */

#content #sidebar {
  float: right; width: 17em;
  font-size: 80%; text-align: center;
}
#content #sidebar a {
  font-weight: bold; text-decoration: none;
  color: #006000;
}
#content #sidebar a:hover { text-decoration: underline; }
#content #sidebar a.try {
  display: block;
  padding: .75em; border-radius: .6em; -moz-border-radius: .6em;
  font-size: 140%;
  color: #e0ffe0; background-color: #499149;
}
#content #sidebar a.try:hover {
  text-decoration: none; background-color: #006000;
}
#content #sidebar .npm {
  padding: .75em; border: 1px solid #499149; border-radius: .7em; -moz-border-radius: .7em;
  font-family: "Lucida Console", fixed, monospace; font-size: 120%;
  color: #2c572c; background-color: #e0ffe0;
}
#content #sidebar .label { margin-left: 2.6em; text-align: left; color: #606060; }
#content #sidebar #download {
  list-style: square;
  padding-left: 2em;
  color: gray;
  text-align: left;
  font-size: 120%;
}
#content #sidebar a.twitter { display:block; margin-top: 5em; }
#content #sidebar .separator { color: gray; margin: 1.5em 0 1em 0; }

#content #left-column { margin-right: 17em; }

/* Online Version */

#content .message {
  border-radius: .5em; -moz-border-radius: .5em; padding: .5em 1em;
}
#content .message.info { background-color: #c0ffc0; }
#content .message.info a.download { display: block; float: right; }
#content .message.info .size-and-time { visibility: hidden; float: right; font-size: 70%; margin: .3em 0; color: #80c080; }
#content .message.info:hover .size-and-time { visibility: visible; }
#content .message.error { background-color: orange; }
#content .message.progress {
  padding-left: 40px;
  /* Spinner image generated by http://www.loadinfo.net/. */
  background: #ffff80 url("../img/spinner-16x16-progress.gif") 14px center no-repeat;
}
#content .message.disabled { color: gray; background-color: #f0f0f0; }

#content table.form { width: 100%; }
#content table.form td, table.form th { padding: .5em 1em; }
#content table.form td:first-child, table.form th:first-child { padding-left:  0; }
#content table.form td:last-child,  table.form th:last-child  { padding-right: 0; }
#content table.form th { text-align: left; font-weight: normal; }

#content h2.suggestion { border: none; }
#content h2.suggestion.top { margin-top: 0; }
#content h2.suggestion .step-number {
  display: block; float: left;
  width: 1.5em;
  border-radius: .4em; -moz-border-radius: .4em;
  text-align: center;
  color: white; background-color: black;
}
#content h2.suggestion .step-title { margin-left: 2.5em; }

#content textarea.code { width: 100%; height: 20em; }

#content .textarea-wrapper { padding-right: 6px; }

#content .tooltip { position: absolute; display: none; }
#content .tooltip .content {
  padding: .5em 1em;
  box-shadow: .25em .25em .5em rgba(0, 0, 0, 0.25); -webkit-box-shadow: .25em .25em .5em rgba(0, 0, 0, 0.25); -moz-box-shadow: .25em .25em .5em rgba(0, 0, 0, 0.25);
  border-radius: .5em; -moz-border-radius: .5em;
  padding: .5em 1em;
  color: white; background-color: black;
  font-size: 80%;
}
#content .tooltip .arrow {
  height: 6px;
  background: url("../img/tooltip-arrow.png") top center no-repeat;
}

#content #columns { width: 100%; height: 100%; border-spacing: 1em; }
#content #columns td { width: 50%; }

#content table.column { width: 100%; height: 100%; }
#content table.column td { vertical-align: top; }
/* Browsers will enlarge the |.content-height| cells to fit the contents. */
#content table.column td.content-height { height: 1px; }

#content #output-header {
  margin: 1.25em 0 0 0; border: none; padding: .25em 1.2em .25em 1.2em;
  font-size: 80%;
  color: white; background-color: silver;
}
#content #output {
  overflow: auto;
  max-height: 20em;
  margin: 0; padding: .5em 1em; border: 2px solid silver; border-top: none;
  background-color: #f0f0f0;
}
#content #output.disabled { color: gray; }

#content #settings { padding: .5em 0; }
#content #settings label { padding-right: 1em; }
#content #parser-var { width: 15em; }
#content #parser-download {
  none; float: right;
  width: 9em;
  padding: .5em; border-radius: .4em; -moz-border-radius: .4em;
  text-align: center; text-decoration: none;
  color: #e0ffe0; background-color: #499149;
}
#content #parser-download:hover { background-color: #006000; }
#content #parser-download.disabled { color: #e0e0e0; background-color: gray; }
